<template>
  <div class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";

// 模拟的氮磷钾数据，每个时间点上氮、磷、钾的值
const npkData = [
  { time: "2023-01", nitrogen: 30, phosphorus: 15, potassium: 20 },
  { time: "2023-02", nitrogen: 32, phosphorus: 16, potassium: 22 },
  { time: "2023-03", nitrogen: 34, phosphorus: 17, potassium: 24 },
  { time: "2023-04", nitrogen: 33, phosphorus: 18, potassium: 23 },
  { time: "2023-05", nitrogen: 35, phosphorus: 19, potassium: 25 },
  { time: "2023-06", nitrogen: 36, phosphorus: 20, potassium: 26 }
];

// 提取时间、氮、磷、钾的数据
const times = npkData.map(item => item.time);
const nitrogen = npkData.map(item => item.nitrogen);
const phosphorus = npkData.map(item => item.phosphorus);
const potassium = npkData.map(item => item.potassium);

// 配置 ECharts
const option: ECOption = {
  grid: {
    top: "10%",
    left: "10%",
    right: "10%",
    bottom: "15%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: times,
    axisLine: {
      lineStyle: {
        color: "#fff"
      }
    },
    axisLabel: {
      color: "#fff",
      fontSize: 14
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: "value",
    axisLine: {
      show: false
    },
    axisLabel: {
      color: "#fff",
      fontSize: 14
    },
    splitLine: {
      lineStyle: {
        color: "#444"
      }
    }
  },
  legend: {
    data: ["氮 (N)", "磷 (P)", "钾 (K)"],
    textStyle: {
      color: "#fff",
      fontSize: 14
    },
    right: 10,
    top: 10
  },
  series: [
    {
      name: "氮 (N)",
      type: "line",
      data: nitrogen,
      smooth: true,
      lineStyle: {
        color: "#1089E7"
      },
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#1089E7"
      },
      label: {
        show: true,
        position: "top",
        color: "#fff",
        fontSize: 12
      }
    },
    {
      name: "磷 (P)",
      type: "line",
      data: phosphorus,
      smooth: true,
      lineStyle: {
        color: "#F57474"
      },
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#F57474"
      },
      label: {
        show: true,
        position: "top",
        color: "#fff",
        fontSize: 12
      }
    },
    {
      name: "钾 (K)",
      type: "line",
      data: potassium,
      smooth: true,
      lineStyle: {
        color: "#56D0E3"
      },
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#56D0E3"
      },
      label: {
        show: true,
        position: "top",
        color: "#fff",
        fontSize: 12
      }
    }
  ]
};
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 400px;
  background-color: #222222;
  border-radius: 8px;
}
</style>
